<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="f" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>发布房间信息</title>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <link href="/landlord/css/put_all.css" rel="stylesheet"
          type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/landlord/css/uni_loginv4.css" data-for="result">

    <style>
        .select_icon img {
            width: 100%;
            height: 100%;
        }

        li {
            text-align: center;
            height: 45px;
            background-color: white;
            width: 100%;
            margin-bottom: 5px;
        }

        .add-price {
        }

        .add-price ul li.upload {
            width: 45px;
            height: 45px;
            background: url(/landlord/images/pic_add.png) no-repeat;
        }

        label {
            font-family: 微软雅黑, 宋体;
            font-size: 28px;
            color: #636281;
        }

        .add-price .txt {
            color: #666;
        }


    </style>

    <script type="text/javascript">
        top.setTitle("定价");
    </script>

</head>

<body>
<div class="main-part-two">

    <%--@elvariable id="room" type="demo.pojo.room.Room"--%>
    <f:form id="form" modelAttribute="room">

    <input type="hidden" name="_flowExecutionKey"
           value="${flowExecutionKey} }"/>

    <div class="form-info">

        <div class="form-info">
            <em>定价：</em>
            <span class="txt-color-red">*</span>

            <span class="error_message">
                        <f:errors path="prices"/>
                    </span>

            <div class="row">
                <div class="col-ui-12" style="float: none; margin:0 10px;">

                    <div class="add-price">

                        <ul id="priceList">
                            <li class="upload">
                                <input type="button" class="input-file" id="show"/>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>


        <div class="foot-box">
            <table>
                <tr>
                        <%-- <td>
                             <input class="btn-st01" name="_eventId_onCancel" type="submit" value="取消">
                         </td>
                         --%>
                    <td>
                        <input class="btn-st01" name="_eventId_onOk" id="next" type="submit" value="下一步">
                    </td>
                </tr>
            </table>
        </div>

        </f:form>

    </div>


    <%--隔离浮层--%>
    <div id="TANGRAM__PSP_5__" class="pop-mask"
         style="top: 0px; left: 0px;position: fixed; width: 100%; height: 100%; opacity: 0.5;background-color: rgb(0, 0, 0); display: none;"></div>


    <%--弹窗--%>
    <div id="passport-login-pop"
         class="tang-pass-pop-login"
         style="z-index: 60001;left: 50%;top: 30%;width: 0;height: 0;display: none">


        <div id="TANGRAM__PSP_4__foreground"
             style="width: 240px; height: 30px; position: absolute; left: 50%; margin: 0 0 0 -120px;">
            <div class="tang-title tang-title-dragable" id="TANGRAM__PSP_4__title">

                <%--右上角的叉号--%>
                <div class="buttons" id="TANGRAM__PSP_4__titleButtons">
                    <a id="TANGRAM__PSP_4__closeBtn" class="close-btn"></a>
                </div>

                <div class="tang-body" id="TANGRAM__PSP_4__body">
                    <div id="TANGRAM__PSP_10__qrcode" class="clearfix tang-pass-qrcode tang-pass-login"
                         style="display: block; visibility: visible; opacity: 1;">
                        <div class="tang-pass-qrcode-content">

                            <form id="priceForm" style="height: 100%">


                                <div style="width: 100%;top:60px;position: absolute">

                                    <table>

                                        <input id="price" placeholder="价格(元)" type="number" style="width: 70%;"><br>
                                        <input id="time" placeholder="时间" type="number" value="1"
                                               style="width: 28%;margin-top: 5px;margin-right: 1%">

                                        <select id="util" style="width: 40%;margin-top: 5px">
                                            <option value="5">天</option>
                                            <option value="10">小时</option>
                                            <option value="2">月</option>
                                            <option value="1">年</option>
                                        </select>
                                    </table>
                                </div>

                                <div style="width: 100%;bottom: 5px;position: absolute">

                                    <input style="width: 120px; height: 30px; background: #2cbed4; color: #fff; border: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;position: center"
                                           id="subbtn" type="button" value="添加">
                                </div>
                            </form>

                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>


    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>

    <script type="text/javascript">


        var floating_layer = $("#TANGRAM__PSP_5__");

        var dialog = $("#passport-login-pop");

        $("#show").click(function () {
            floating_layer.show()
            dialog.show();
        });

        $("#TANGRAM__PSP_4__closeBtn").click(function () {
            //关闭浮层
            close();
        });

        var doub = new RegExp("^[0-9]+(.([1-9]|([0-9][1-9])))?$");
        var int = new RegExp("^[1-9][0-9]*$");

        var price = $("#price");
        var time = $("#time");
        var util = $("#util");

        var lst = $("#priceList");

        var upld = $('.upload');

        $("#subbtn").click(function () {

            var p = price.val();

            var t = time.val();

            var u = util.val();

            if (!doub.test(p)) {
                alert("价格格式错误")
                return;
            }

            if (!int.test(t)) {
                alert("时间格式错误.必须是整数");
                return;
            }


            //输出文本
            var s = p + "元/";

            if (t != "1") {
                s += t;
            }

            switch (u) {
                case '5':
                    s += "天";
                    break;
                case '10':
                    s += "小时";
                    break;
                case '2':
                    s += "月";
                    break;

                case '1':
                    s += "年";
                    break;
            }

            add(p, t, u, s);
        });

        function close() {
            dialog.hide();
            floating_layer.hide();
            price.val("");
            time.val("1");
            util.val("天");
        }

        //可用数目
        var num = 5;

        //五条记录
        var ls = [false, false, false, false, false];

        //最多只能添加五条价格

        function add(p, t, u, s) {


            //从ls中比较校验.如果已经添加过的就不再添加

            for (i in ls) {

                //禁止重复添加
                if (ls[i] == s) {
                    alert("重复添加:" + s);
                    return;
                }

            }


            for (i in ls) {
                //找出一个空闲位置
                if (!ls[i]) {
                    num--;
                    ls[i] = s;

                    //移除原标签再添加新标签
                    $(".c_" + i).remove();
                    upld.before('<li class=c_' + i + '><label >' + s + '</label></li>');
                    lst.before('<input type="hidden"  class=' + "c_" + i + ' value="' + u + '" name="prices[' + i + '].timeUnit"/>');
                    lst.before('<input type="hidden"  class=' + "c_" + i + ' value="' + p + '" name="prices[' + i + '].price"/>');
                    lst.before('<input type="hidden"  class=' + "c_" + i + ' value="' + t + '" name="prices[' + i + '].num"/>');

                    //添加成功时移除标签
                    close();

                    $('.c_' + i).click(function () {
                        this.remove();
                        del(i);
                    });


                    if (num == 0)
                        upld.hide();


                    return;
                }

            }
        }


        //删除
        function del(i) {
            num++;
            ls[i] = false;

            //移除原标签再添加新标签
            $(".c_" + i).remove();

            lst.before('<input type="hidden"  class=' + "c_" + i + ' value="-1" name="prices[' + i + '].price"/>');

            upld.show();
        }

    </script>

    <%--初始化标签--%>
    <c:forEach items="${room.prices}" var="price">
        <c:if test="${price.price>=0}">
            <script type="text/javascript">
                add('${price.price}', '${price.num}', '${price.timeUnit}', '${price.toString()}')
            </script>
        </c:if>
    </c:forEach>


</div>


</body>
</html>